<template>
  <div class="box">

    <div class="imgs" style="width:250px;height:100px;visibility:hidden" alt=""></div>
    <div class="search">
      <div class="inputView">
        <el-input ref="elinput" v-model="input" placeholder="可以输入公开号、申请号、发明人、申请人或专利权人等"></el-input>
      </div>
      <div class="searchBtn">
        <el-button @click="search" icon="el-icon-search" style="background-color:#008ac0;color:#ffffff">搜索</el-button>
      </div>

    </div>
    <div class="checkBox">

      <el-checkbox v-for="(item,index) in checkList" :key=index :label="item.value" v-model="item.checked">
        {{item.value}}
      </el-checkbox>

    </div>

  </div>
</template>

<script>
  import {
    toRetrieval
  } from '@/api/retrieval'

  export default {
    name: "Index",
    data() {
      return {
        input: "",
        checked1: true,
        checked2: true,
        checked3: true,
        checked4: true,
        checkList: [{
          fieldName: "patent_type",
          value: "发明公开",
          checked: true
        },
          {
            fieldName: "patent_type",
            value: "发明授权",
            checked: true
          },
          {
            fieldName: "patent_type",
            value: "实用新型",
            checked: true
          },
          {
            fieldName: "patent_type",
            value: "外观设计",
            checked: true
          },

        ]

      }
    },
    watch: {},
    mounted() {

    },
    methods: {
      search() {

        let checkParm = this.checkList.filter(item => {
          return item.checked
        })

        let arr = []
        if (checkParm.length != 0) {
          checkParm.forEach(n => {
            arr.push(n.value)
          })
        }

        let data = {
          "queryColumn": [],
          "queryConditions": [{
            "fieldName": "public_number",
            "value": this.input,
            "boolType": 2
          },
            {
              "fieldName": "application_number",
              "boolType": 2,
              "value": this.input
            },
            {
              "fieldName": "title",
              "boolType": 2,
              "value": this.input
            },
            {
              "fieldName": "applicants",
              "boolType": 2,
              "value": this.input
            },
            {
              "fieldName": "inventors",
              "boolType": 2,
              "value": this.input
            },
            {
              "fieldName": "assignees",
              "boolType": 2,
              "value": this.input
            },
            {

              "fieldName": "patent_type",
              "boolType": 1,
              "value": arr
            }
          ],
          "pageIndex": 1,
          "pageSize": 20
        }

        // localStorage.setItem("conditions", JSON.stringify(data.queryConditions))
        localStorage.setItem("searchData", JSON.stringify(data))

        if (this.input == "") {

          this.$refs.elinput.$el.getElementsByTagName("input")[0].focus()


        } else {
          this.$router.push({
            path: "/retrieval/tableList"
          })
        }

      }
    }
  }
</script>

<style lang="scss" scoped>
  $bg: linear-gradient(to right, #12a8bc 10%, #2dbdd0);

  .box {
    // width: 100%;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    // min-height: 100%;
    background-color: #f3f3f3;

    padding-top: 140px;

    .imgs {
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      // padding-top: 100px;
      background: url("../../assets/logoP.png") no-repeat center;
      background-size: 100% 100%;

      // background-color: red;
    }

    .el-button {
      border-radius: 0;
      border: none;
    }

    // background: $bg;
    // background-color: #12a8bc;

    .search {
      width: 65%;
      display: flex;
      margin-top: 120px;
      flex-direction: row;
      background-color: transparent;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      // padding-top: 250px;
      z-index: 1;

      //    top:130px;
      .inputView {
        flex: 1
      }

    }

    .checkBox {
      margin-top: 170px;
      position: fixed;
      left: 50%;
      transform: translateX(-50%);
      // padding-top: 300px;
      width: 65%;
      height: 60px;
    }

  }
</style>
